﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>Metamorphosis Design Free Css Templates</title>
    <meta name="keywords" content="" />
    <meta name="description" content="" />
    <link href="styles.css" rel="stylesheet" type="text/css" media="screen" />
    <!-- Pirobox setup and styles -->
    <script type="text/javascript" src="lib/jquery-1.3.2.min.js"></script>
    <script type="text/javascript" src="lib/pirobox.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $().piroBox({
                my_speed: 400, //animation speed
                bg_alpha: 0.1, //background opacity
                slideShow: false, // true == slideshow on, false == slideshow off
                slideSpeed: 4, //slideshow duration in seconds(3 to 6 Recommended)
                close_all: '.piro_close,.piro_overlay'// add class .piro_overlay(with comma)if you want overlay click close piroBox

            });
        });
    </script>
    <link href="images/style.css" rel="stylesheet" type="text/css" />
    <!-- Pirobox setup and styles end-->
</head>
<body>
    <div id="top_header">
        <div id="logo">
            <p>
                <a href="#">MyDesign</a></p>
            <small class="small_logo"><a href="#">small slogan goes here</a></small>
        </div>
        <div id="link_bar">
            <ul>
                <li><a href="#">
                    <img src="images/link1.png" alt="" title="img" /></a></li>
                <li><a href="#">
                    <img src="images/link2.png" alt="" title="img" /></a></li>
                <li><a href="#">
                    <img src="images/link3.png" alt="" title="img" /></a></li>
                <li><a href="#">
                    <img src="images/link4.png" alt="" title="img" /></a></li>
                <li><a href="#">
                    <img src="images/link5.png" alt="" title="img" /></a></li>
            </ul>
        </div>
        <div id="header_border_top">
        </div>
    </div>
    <div id="menu_bg">
        <div id="menu">
            <ul>
                <li><a href="index.html">Home</a></li>
                <li><a href="services.html">Services</a></li>
                <li><a href="blog.html">Blog</a></li>
                <li><a href="portfolio.html">Portfolio</a></li>
                <li><a href="aboutus.html" class="active">About Us</a></li>
                <li><a href="contactus.html">Contact Us</a></li>
            </ul>
        </div>
    </div>
    <div id="header_bottom">
        <p>
            Phasellus tortor metus, ullamcorper a tincidunt quis, fermentum id turpis. Pellentesque
            commodo, mauris quis sodales faucibus, dui lorem tincidunt purus, non egestas nibh
            nisi et leo. Donec feugiat tempus nibh vitae aliquam. Curabitur egestas tincidunt
            lorem eget faucibus.
        </p>
    </div>
    <div class="header_bor_bot">
        <div class="start_now">
            <a href="#">start now!</a></div>
    </div>
    <div id="content">
        <div id="contact_box">
            <div class="aboutus">
                <img src="images/title1.png" alt="" title="" style="padding-left: 10px; padding-top: 3px;
                    float: left;" />
                <h2>
                    About Us</h2>
            </div>
            <div class="con_bg_top">
            </div>
            <div class="col_bg">
                <div class="col_grad_bot">
                    <div class="col_grad_top">
                        <div id="contact_bg">
                            <div id="contactus_left">
                                <a href="#">Employee’s Name Goes Here</a>
                                <div class="aboutus_bg">
                                    <div class="about_col1">
                                        <img src="images/user_face2.jpg" alt="" title="" style="float: left; padding-right: 10px;
                                            padding-top: 5px;" />
                                        <p>
                                            Suspendisse est lectus, placerat sit amet fringilla et, vulputate ut mi. Nulla facilisi.
                                            Sed posuere, ligula ac vulputate laoreet, magna justo mollis felis, vel auctor est
                                            mi</p>
                                    </div>
                                    <div class="about_col2">
                                        <ul class="ul_bot">
                                            <li><a href="#">Nam nisi leo, vehicula bibendum </a></li>
                                            <li><a href="#">Ut condimentum congue mauris, a</a></li>
                                            <li><a href="#">Aenean a mauris eu velit cursus</a></li>
                                            <li><a href="#">Mauris rutrum tellus eleifend dolor</a></li>
                                        </ul>
                                    </div>
                                    <div style="clear: both">
                                    </div>
                                </div>
                                <br />
                                <a href="#">Employee’s Name Goes Here</a>
                                <div class="aboutus_bg">
                                    <div class="about_col2">
                                        <ul class="ul_bot" style="padding-left: 0px;">
                                            <li><a href="#">Vivamus dui magna, sodales eu porta </a></li>
                                            <li><a href="#">Quisque semper purus ac purus</a></li>
                                            <li><a href="#">Curabitur gravida eros sit amet sem</a></li>
                                        </ul>
                                    </div>
                                    <div class="about_col1" style="padding-left: 10px;">
                                        <img src="images/user_face2.jpg" alt="" title="" style="float: right; padding-left: 10px;
                                            padding-top: 5px;" />
                                        <p>
                                            Sed posuere, ligula ac vulputate laoreet, magna justo mollis felis, vel auctor est
                                            mi eu ipsum. Cum sociis natoque penatibus et magnis dis parturient
                                        </p>
                                    </div>
                                    <div style="clear: both">
                                    </div>
                                </div>
                                <br />
                                <a href="#">Employee’s Name Goes Here</a>
                                <div class="aboutus_bg">
                                    <div class="about_col1">
                                        <img src="images/user_face2.jpg" alt="" title="" style="float: left; padding-right: 10px;
                                            padding-top: 5px;" />
                                        <p>
                                            Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus
                                            mus. Duis ac scelerisque ante. Sed
                                        </p>
                                    </div>
                                    <div class="about_col2">
                                        <ul class="ul_bot">
                                            <li><a href="#">Nam nisi leo, vehicula bibendum </a></li>
                                            <li><a href="#">Ut condimentum congue mauris, a</a></li>
                                            <li><a href="#">Aenean a mauris eu velit cursus</a></li>
                                            <li><a href="#">Mauris rutrum tellus eleifend dolor</a></li>
                                        </ul>
                                    </div>
                                    <div style="clear: both">
                                    </div>
                                </div>
                            </div>
                            <div id="contactus_right">
                                <h4>
                                    Our ClientsTestimonials</h4>
                                <div class="con_hr">
                                </div>
                                <div class="user_box">
                                    <img src="images/user_face.png" alt="" title="" style="float: left; padding-right: 15px;
                                        padding-bottom: 10px;" />
                                    <a href="#">Nam non sem magna. Nam nec orci </a>
                                    <p>
                                        Nam non sem magna. Nam nec orci vel erat sollicitudin lacinia vitae ipsum.
                                    </p>
                                    <a href="#">John Doe </a>
                                    <br />
                                    <a href="#">http://www.somewebsite.com</a>
                                </div>
                                <br />
                                <div class="con_hr">
                                </div>
                                <div class="user_box">
                                    <img src="images/user_face.png" alt="" title="" style="float: left; padding-right: 15px;
                                        padding-bottom: 10px;" />
                                    <a href="#">Sollicitudin lacinia vitae eget ipsums</a>
                                    <p>
                                        Quisque semper purus ac purus adipiscing sed iaculis turpis venenatis.</p>
                                    <a href="#">John Doe </a>
                                    <br />
                                    <a href="#">http://www.somewebsite.com</a>
                                </div>
                                <br />
                                <div class="con_hr">
                                </div>
                                <div class="user_box">
                                    <img src="images/user_face.png" alt="" title="" style="float: left; padding-right: 15px;
                                        padding-bottom: 10px;" />
                                    <a href="#">In elementum, diam nec hendrerit </a>
                                    <p>
                                        Suspendisse est lectus, placerat sit amet fringilla et, vulputate ut mi. Nulla</p>
                                    <a href="#">John Doe </a>
                                    <br />
                                    <a href="#">http://www.somewebsite.com</a>
                                </div>
                            </div>
                            <div style="clear: both">
                            </div>
                        </div>
                    </div>
                    <div style="clear: both">
                    </div>
                </div>
            </div>
            <div class="con_bg_bot">
            </div>
        </div>
        <div class="con_white_hr">
        </div>
        <div class="column_box">
            <div class="col1">
                <h2>
                    Get Free Quote</h2>
                <div id="log">
                    <form id="form1" method="post" action="#">
                    <fieldset>
                        <label for="text1">
                            Name: (Required)
                        </label>
                        <br />
                        <input id="text1" type="text" name="text1" value="" alt="" /><br />
                        <label for="text2">
                            Email Address: (Required)</label><br />
                        <input id="text2" type="text" name="text2" value="" alt="" /><br />
                        <label for="text2">
                            Message: (Required)
                        </label>
                        <br />
                        <textarea id="text_mess" name="text_mess" cols="0" rows="0"></textarea><br />
                        <input type="submit" id="login-submit" value="Send" />
                    </fieldset>
                    </form>
                </div>
            </div>
            <div class="col2">
                <h2>
                    Our Contact Info</h2>
                <p class="bg_black">
                    Vivamus dui magna, sodales eu porta tristique eget ligula. Quisque semper purus
                    ac purus adipiscing sed iaculis turpis venenatis. Curabitur gravida eros sit amet
                    sem euismod dignissim.
                </p>
                <h2>
                    Our Partner's Links</h2>
                <ul class="ul_bot">
                    <li><a href="http://www.metamorphozis.com/free_templates/free_templates.php">Free Website
                        Templates</a></li>
                    <li><a href="http://www.metamorphozis.com/free_flash_templates/free_flash_templates.php">
                        Free Flash Templates</a></li>
                    <li><a href="http://www.metamorphozis.com/shop/easy_flash_templates.php">Easy Flash
                        Templates</a></li>
                    <li><a href="http://www.metamorphozis.com/website_hosting/index.php">Top Hosting Providers</a></li>
                    <li><a href="http://www.metamorphozis.com/blog/category/free-fonts/">Free Fonts</a></li>
                    <li><a href="http://www.metamorphozis.com/blog/category/freeicons/">Free Icons</a></li>
                    <li><a href="http://www.metamorphozis.com/blog/category/free-photoshop-brushes/">Free
                        Photoshop Brushes</a></li>
                    <li><a href="http://www.metamorphozis.com/blog/feed/">RSS Subscribe</a></li>
                </ul>
            </div>
            <div class="col3">
                <h2>
                    Recent Projects</h2>
                <a href="images/metamorph_lighting.jpg" class="pirobox_footer">
                    <img class="img_bor" src="pic/pic-02.jpg" alt="" title="pic-01" /></a> <a href="images/metamorph_ball.jpg"
                        class="pirobox_footer">
                        <img class="img_bor" src="pic/pic-03.jpg" alt="" title="pic-01" /></a>
            </div>
        </div>
        <div class="con_white_hr">
        </div>
    </div>
    <div id="footer">
        <p>
            Copyright 2010. <a href="#">Privacy Policy</a> | <a href="#">Terms of Use</a> |
            <a href="http://validator.w3.org/check/referer" title="This page validates as XHTML 1.0 Transitional">
                <abbr title="eXtensible HyperText Markup Language">
                    XHTML</abbr></a> | <a href="http://jigsaw.w3.org/css-validator/check/referer" title="This page validates as CSS">
                        <abbr title="Cascading Style Sheets">
                            CSS</abbr></a></p>
        <!-- Please DO NOT remove the following notice -->
        <p>
            Design by <a href="http://www.metamorphozis.com/" title="Flash Templates">Flash Templates</a>,
            coded by <a href="http://www.flashtemplatesdesign.com/" title="Free Flash Templates">
                Free Flash Templates</a></p>
        <!-- end of copyright notice-->
    </div>
</body>
</html>
